<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/*头部*/
			.mui-bar-nav { background: #FED000; color: #fff;}
			.search { float: left; width: 100%; height: 30px; line-height: 30px; color: #999; font-size: 12px; display: block; background: #fff; border-radius: 3px; overflow: hidden; margin-top: 8px; padding-left: 6px; }
			.search:hover { color: #999;}
			.search .mui-icon-search { padding: 0;vertical-align: middle; top: -2px; margin-right: -6px !important;}
			.message { color: #fff; float: right; font-size: 32px !important; padding: 6px 10px !important;}
			/*banner*/
			.mui-slider-indicator { text-align: right; padding-right: 10px;}
			.mui-slider-indicator .mui-indicator { border: 0;margin: 0 6px 0 0;width: 8px; height: 8px; background: #fff;}
			.mui-slider-indicator .mui-active.mui-indicator { background: #FFC704; }
			/*九宫格*/
			@font-face {font-family: "iconfont"; src: url('fonts/iconfont.ttf') format('truetype');}
			.iconfont { font-family:"iconfont" !important; font-size:20px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
			.icon-shangcheng:before { content: "\e63f"; }
			.icon-ketang:before { content: "\e637"; position: relative; left: -1px; }
			.icon-fenlei:before { content: "\e608"; }
			.icon-xiazai:before { content: "\e6d8"; }
			.icon-jinbi:before { content: "\e69f"; position: relative; top: -3px; }
			.icon-jiuhuashantubiao-:before { content: "\e62e"; }
			.icon-bangdan:before { content: "\e623"; }
			.icon-cloud-intelligent:before { content: "\e706"; position: relative; left: 2px; }
			.mui-table-view  { background: #fff !important; padding: 10px 0 !important;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell { border: 0; padding: 0 15px;}
			.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) { padding: 5px 0;}
			.mui-table-view .iconfont { display: inline-block; width: 40px; height: 40px; line-height: 40px; border-radius: 100%;  text-align: center; background: #1E9FFF; color: #fff; }
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body { font-size: 12px;}
			.mui-table-view .icon-shangcheng { background: #008040; }
			.mui-table-view .icon-ketang { background: #FF00FF; font-size: 24px;}
			.mui-table-view .icon-fenlei { background: #FF9800; }
			.mui-table-view .icon-xiazai { background: #8080C0; }
			.mui-table-view .icon-jinbi { background: #8a6de9; font-size: 24px;}
			.mui-table-view .icon-jiuhuashantubiao- { background: #4cd964; font-size: 24px; }
			.mui-table-view .icon-bangdan { background: #FF5722; }
			.mui-table-view .icon-cloud-intelligent { background: #007aff; font-size: 24px;}
			.con_list { margin-top: 10px; background: #fff;}
			.con_list .mui-table-view { padding: 4px 0 10px !important;}
			.con_list .mui-table-view:before,.con_list .mui-table-view:after { background: #eee;}
			.con_list h5 { color: #FA9101; padding: 10px 0 2px 10px;}
			.con_list h5 .mui-icon { vertical-align: middle; position: relative; top: -1px; margin-right: 4px;}
			.con_list .mui-media-body { text-align: left; line-height: 18px !important; margin-top: 0 !important; word-break: break-all;white-space:normal; height: 36px !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  overflow: hidden; }
			.con_list h6 { overflow: hidden; padding:2px 0 10px 0;}
			.con_list h6 a { width: 50%; float: left; text-align: center; color: #FA9101; position: relative;}
			.con_list h6 a:first-child:before { content: ""; display: inline-block; height: 100%; width: 1px; background: #eee; position: absolute; right: 0; top: 0; }
			.con_list h6 a .mui-icon { vertical-align: middle; position: relative; top: -1px; margin-left: 4px;}
			.con_list span { position: absolute;left:0;bottom: 40px; color: #fff; font-size: 12px; padding-left: 20px;}
			.con_list span i { font-style: normal; display: inline-block;border: 1px #fff solid; border-radius: 100%; width: 14px; padding-left: 2px; height: 14px; line-height: 14px; text-align: center; font-size: 6px; margin-right: 3px; position: relative; top: -2px;}
			@media only screen and (max-width: 320px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 119px;}
			}
			@media only screen and (max-width: 360px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 133px;}
			}
			@media only screen and (max-width: 414px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 153px;}
			}
			@media only screen and (min-width: 415px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 160px;}
			}
			@media only screen and (min-width: 640px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 284px;}
			}
			@media only screen and (min-width: 1000px) {
				.mui-slider .mui-slider-group .mui-slider-item img { height: 379px;}
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<div class="mui-row">
				<div class="mui-col-xs-11">
					<a href="javascript:;" id="search" class="search"><span class="mui-icon mui-icon-search"></span>搜索视频，舞曲，达人</a>
				</div>
				<div class="mui-col-xs-1">
					<a href="message.html" class="message mui-icon mui-icon-email"></a>
				</div>
			</div>
			
			
		</header>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--轮播-->
				<div id="slider" class="mui-slider mui-slider-self">
					<div class="mui-slider-group mui-slider-loop">
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
					</div>
				</div>
				<!--轮播-->
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="classify/index.html">
					        <span class="iconfont icon-fenlei"></span>
					        <div class="mui-media-body">分类</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="ranking/index.html">
					        <span class="iconfont icon-bangdan"></span>
					        <div class="mui-media-body">榜单</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="dance_music/index.html">
					        <span class="iconfont icon-jiuhuashantubiao-"></span>
					        <div class="mui-media-body">舞曲</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="download/index.html">
					        <span class="iconfont icon-xiazai"></span>
					        <div class="mui-media-body">下载</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="daren_expert/index.html">
					        <span class="iconfont icon-cloud-intelligent"></span>
					        <div class="mui-media-body">达人</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="classroom/index.html">
					        <span class="iconfont icon-ketang"></span>
					        <div class="mui-media-body">课堂</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="mall/index.html">
					        <span class="iconfont icon-shangcheng"></span>
					        <div class="mui-media-body">商城</div>
					    </a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
					    <a data-url="gold_task/index.html">
					        <span class="iconfont icon-jinbi"></span>
					        <div class="mui-media-body">金币任务</div>
					    </a>
					</li>
				</ul>
				<div class="con_list">
					<h5><span class="mui-icon mui-icon-navigate"></span>原创精选</h5>
					<ul class="mui-table-view mui-grid-view" id="sid1">
				    </ul>
					<h6>
						<a href="javascript:;">换一批<span class="mui-icon mui-icon-refresh"></span></a>
						<a href="javascript:;">查看更多<span class="mui-icon mui-icon-redo"></span></a>
					</h6>
				</div>
				<div class="con_list">
					<h5><span class="mui-icon mui-icon mui-icon-map"></span>人气视频</h5>
					<ul class="mui-table-view mui-grid-view" id="sid2">
				      
				    </ul>
					<h6>
						<a href="javascript:;">换一批<span class="mui-icon mui-icon-refresh"></span></a>
						<a href="javascript:;">查看更多<span class="mui-icon mui-icon-redo"></span></a>
					</h6>
				</div>
				<div class="con_list">
					<h5><span class="mui-icon mui-icon mui-icon-mic"></span>就爱课堂</h5>
					<ul class="mui-table-view mui-grid-view" id="sid3">
				       
				    </ul>
					<h6>
						<a href="javascript:;">换一批<span class="mui-icon mui-icon-refresh"></span></a>
						<a href="javascript:;">查看更多<span class="mui-icon mui-icon-redo"></span></a>
					</h6>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({
				swipeBack: false,
				pullRefresh: {
					container:'#pullrefresh',
					down: {
						style:'circle',
						callback: pulldownRefresh
					}
				}
			});
			//下拉刷新
			function pulldownRefresh() {
				setTimeout(function() {
					//插入数据
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					mui.toast('下拉刷新成功');
				}, 1000);
			}
			//跳转搜索
			document.getElementById("search").addEventListener('tap', function() {
				mui.openWindow({
					url: 'search.html',
					id: 'search'})
			});
			mui.plusReady(function() {
				$(".mui-table-view-cell").on("tap","a",function(){
					var this_url = $(this).attr("data-url");
					mui.openWindow({
						url: this_url,
						id: this_url
					});
				});
				mui.ajax('http://k5.wuhubgy.cn/api/index/topad', {
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					success: function(data) {
						console.log(data);
						var items = data.data;
						var point = "";
						var html = '<div class="mui-slider-item"><a href="' + items[items.length-1].url + '" title="' + items[items.length-1].name + '"><img src="' + items[items.length-1].pic + '"></a></div>';
						for(var i = 0; i < items.length; i++) {
							html += '<div class="mui-slider-item"><a href="' + items[i].url + '" title="' + items[i].name + '"><img src="' + items[i].pic + '"></a></div>';
							if(i == 0) {
								point += '<div class="mui-indicator mui-active"></div>'
							} else {
								point += '<div class="mui-indicator"></div>'
							}
						}
						html += '<div class="mui-slider-item  mui-slider-item-duplicate"><a href="' + items[0].url + '" title="' + items[0].name + '"><img src="' + items[0].pic + '"></a></div>'
						$('.mui-slider-group').html(html);
						$('.mui-slider-indicator').html(point);
						var slider = mui("#slider");
						slider.slider({
							interval: 5000
						});
					}
			
				});
			
				mui.ajax('http://k5.wuhubgy.cn/api/index/hotvideo', {
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					success: function(data) {
						console.log(data);
						var newList = data.data;
						var html = '';
						for(var i = 0; i < newList.length; i++) {
							html += '<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#" ><img  class="mui-media-object " src="' + newList[i].thumb + '"><span><i>▶</i>50.1 万</span><div class="mui-media-body">' + newList[i].title + '</div></a></li>';
						}
			
						$('#sid1').html(html);
					}
				});
			
				mui.ajax('http://k5.wuhubgy.cn/api/index/hotvideo', {
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					success: function(data) {
						console.log(data);
						var newList = data.data;
						var html = '';
						for(var i = 0; i < newList.length; i++) {
							html += '<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#" ><img  class="mui-media-object " src="' + newList[i].thumb + '"><span><i>▶</i>50.1 万</span><div class="mui-media-body">' + newList[i].title + '</div></a></li>';
						}
			
						$('#sid2').html(html);
					}
				});
			
				mui.ajax('http://k5.wuhubgy.cn/api/index/hotvideo', {
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					success: function(data) {
						console.log(data);
						var newList = data.data;
						var html = '';
						for(var i = 0; i < newList.length; i++) {
							html += '<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#" ><img  class="mui-media-object " src="' + newList[i].thumb + '"><span><i>▶</i>50.1 万</span><div class="mui-media-body">' + newList[i].title + '</div></a></li>';
						}
						$('#sid3').html(html);
					}
				});
			
			});
		</script>
	</body>

</html>